<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>DOH Validation Relevant Test</title>
		<link rel='stylesheet' href='../../../../../dojo/resources/dojo.css'>
		<link rel='stylesheet' href='../../../../../dijit/themes/dijit.css'>
		<link rel='stylesheet' href='../../../../../dijit/themes/claro/claro.css'>
<script type="text/javascript" djConfig="parseOnLoad:0,isDebug:1,async:1" src="../../../../../dojo/dojo.js"></script>
<script type="text/javascript">
			var model;
			require([
					'dojo/_base/declare',
					'dojo/parser',
					'dojox/mvc',
					'dojox/mvc/StatefulModel',
					'dojo/_base/lang',
					"dojo/_base/html",
					'dijit/form/Button'
				], function (declare, parser, mvc, StatefulModel, lang, html) {
					var Model = declare([StatefulModel], {
						constructor: function (args) {
							mvc.bindInputs([this.num1, this.num2], lang.hitch(this, '_checkNums'));
						},

						_checkNums: function () {
							var num1Val = this.num1.get('value'),
								num2Val = this.num2.get('value');

							this.num1.set({
								relevant: num1Val !== num2Val,
								valid: num1Val <= num2Val
							});

							this.num2.set({
								relevant: num1Val !== num2Val,
								valid: num1Val <= num2Val
							});
						}
					});

					model = new Model({
						data: {
							num1: 10,
							num2: 20
						}
					});
				require([
					'doh/runner', 'dijit/dijit'
				], function(){
				require([
					'dojo/domReady!'
					], function(){
						doh.register("parse", function() {
							dojo.parser.parse();
						});
						// should be able to verify all of the inputs
						doh.register("check initial values and bindings", [{
							name : "initial",
							runTest : function() {
								num1 = dijit.byId("num1");
								num2 = dijit.byId("num2");
								doh.is("10", num1.get('value'),"num1 should be 10");
								doh.is("20", num2.get('value'),"num2 should be 20");
								doh.t(num1.isValid(),"num1.isValid() should be true");
								doh.t(num2.isValid(),"num2.isValid() should be true");
								doh.f(num2.disabled,"num2.disabled should be false");
								doh.f(num1.disabled,"num1.disabled should be false");
							}
						}]);

						doh.register("update num1 invalid", [{
							name : "Update-Num1-invalid",
							runTest : function() {
								num1 = dijit.byId("num1");
								num2 = dijit.byId("num2");
								num1.set("value","30");
								doh.is("30", num1.get('value'),"num1 should be 30");
								doh.f(num1.disabled,"num1.disabled should be false");
								doh.is("20", num2.get('value'),"num2 should be 20");
								doh.f(num2.isValid(),"num2.isValid() should be false");
								doh.f(num2.disabled,"num2.disabled should be false");
								doh.t(dojo.hasClass('widget_num1','dijitNumberTextBoxError'),"num1 should have the dijitNumberTextBoxError class");
								doh.t(dojo.hasClass('widget_num2','dijitNumberTextBoxError'),"num2 should have the dijitNumberTextBoxError class");
							}
						}]);

						doh.register("update num1 disabled2", [{
							name : "Update-Num1-disabled2",
							runTest : function() {
								num1 = dijit.byId("num1");
								num2 = dijit.byId("num2");
								num1.set("value","21");
								num2.set("value","21");
								doh.is("21", num1.get('value'),"num1 should be 30");
								doh.is("21", num2.get('value'),"num2 should be 20");
								doh.t(dijit.byId("num2").disabled,"num2.disabled should be true");
								doh.t(dijit.byId("num1").disabled,"num1.disabled should be true");

								model.reset();
							}
						}]);

						doh.run();

					});
				});
		});

		</script>
</head>
	<body class="claro">
		<form method="post">
			<div>
				<label for="num1">Number 1</label>
				<input data-dojo-props="ref:model.num1" data-dojo-type="dijit.form.NumberTextBox" id="num1">
			</div>
			<div>
				<label for="num2">Number 2</label>
				<input data-dojo-props="ref:model.num2" data-dojo-type="dijit.form.NumberTextBox" id="num2">
			</div>
		</form>
		<br/>Model:
		<button id="reset" type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){doReset()}">Reset</button>

		<script type="text/javascript">
			function doReset() {
				model.reset();
			}
		</script>

	</body>

</html>
